<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('出库单单据')" />
</head>
<body class="gray-bg">
     <div class="container-div wrapper wrapper-content animated fadeInRight">
         <form class="form-horizontal m" id="form-rent-edit"  th:object="${entityRent}">
             <input id="rentId" type="hidden" name="id" readonly th:field="*{id}" >
             <div class="row">
                 <div class="col-sm-12">
                     <div class="ibox-content p-xl">
                         <div class="row">
                             <div class="col-sm-12 text-center">
                                <h2 ><strong id="company"></strong><strong>出库单</strong></h2>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
             <h4  class="form-header h4">出库单信息</h4>
             <div class="form-group">
                 <label class="col-sm-3 control-label">出库单号:</label>
                 <span  class="col-sm-3 control-label-left" id="rentNumber"></span>
                 <label class="col-sm-3 control-label">出库日期:</label>
                 <span  class="col-sm-3 control-label-left" id="issueDate"></span>
             </div>
             <div class="form-group">
                 <label class="col-sm-3 control-label">计划租赁开始日期:</label>
                 <span class="col-sm-3  control-label-left" id="planRentStartTime"></span>
                 <label class="col-sm-3 control-label">计划租赁结束日期:</label>
                 <span class="col-sm-3  control-label-left" id="planRentEndTime"></span>
             </div>
             <div class="form-group">
                 <label class="col-sm-3 control-label">计划租赁天数:</label>
                 <span class="col-sm-3  control-labe-left" id="planRentSpan"></span>
                 <label class="col-sm-3 control-label">实际租赁开始日期:</label>
                 <span class="col-sm-3  control-labe-left" id="actualRentStartTime"></span>
             </div>
             <div class="form-group">
                 <label class="col-sm-3 control-label">备注:</label>
                 <span class="col-sm-9  control-label-left  control-labe-left" id="note"></span>
             </div>
             <h4 class="form-header h4">客户信息</h4>
             <div class="form-group">
                 <label class="col-sm-3 control-label">客户名称：</label>
                 <span class="col-sm-3  control-label-left" id="customerName"></span>
                 <label class="col-sm-3 control-label">客户地址：</label>
                 <span class="col-sm-3  control-label-left" id="customerAddress"></span>
             </div>
             <div class="form-group">
                 <label class="col-sm-3 control-label">客户座机：</label>
                 <span class="col-sm-3  control-label-left" id="customerTel"></span>
                 <label class="col-sm-3 control-label">联系人：</label>
                 <span class="col-sm-3  control-label-left" id="customerContacts"></span>
             </div>
             <div class="form-group">
                 <label class="col-sm-3 control-label">身份证号：</label>
                 <span class="col-sm-3  control-label-left" id="customerIdCard"></span>
                 <label class="col-sm-3 control-label">联系人手机号：</label>
                 <span class="col-sm-3  control-label-left" id="customerPhone"></span>
             </div>
<!--             <h4 class="form-header h4">器材信息</h4>-->
             <div class="col-sm-12 select-table table-striped">
                 <table id="bootstrap-table"></table>
                 <div class="text-right">
                     <button class="btn btn-primary" onclick="printPage(this)"><i class="fa fa-print"></i> 打印</button>
                 </div>
                 <div class="well m-t">
                     <span>公司地址：</span><span id="companyAddress"></span><br>
                     <span>联系人：</span><span id="companyCallPerson"></span><br>
                     <span>联系人手机号：</span><span id="companyPhone"></span><br>
                     <span><strong>一流的设备、一流的服务！</strong></span>
                 </div>
             </div>
         </form>
         <input name="unit" type="hidden" class="form-control col-sm-4" th:with="type=${@dict.getType('sys_unit')}"/>
     </div>
    <th:block th:include="include :: footer" />
    <th:block th:include="include :: bootstrap-suggest-js" />
    <th:block th:include="include :: bootstrap-typeahead-js" />
    <th:block th:include="include :: datetimepicker-js" />
    <script th:inline="javascript">
        var editFlag = [[${@permission.hasPermi('system:rent:edit')}]];
        var removeFlag = [[${@permission.hasPermi('system:rent:remove')}]];
        var prefix = ctx + "system/rent";
        var rentValidDatas = [[${@dict.getType('sys_rent_valid')}]];
        var unitDatas = [[${@dict.getType('sys_unit')}]];
        var companyName = [[${@config.getKey('company_name')}]];
        var companyAddress = [[${@config.getKey('company_address')}]];
        var companyPhone = [[${@config.getKey('company_phone')}]];
        var companyCallPerson = [[${@config.getKey('company_call_person')}]];
        function printPage(obj) {
            $(obj).hide();
            window.print();
            $(obj).show();
        }

        $(function() {
            $("#company").html(companyName);
            $("#companyAddress").html(companyAddress);
            $("#companyPhone").html(companyPhone);
            $("#companyCallPerson").html(companyCallPerson);
            var deviceArray;
            $.post(prefix + "/getRentInfo", {id: $("#rentId").val()}, function(result) {
                rent = result.data;
                deviceArray = rent.validRentDevice;
                $("#rentNumber").html(rent.rentNumber);

                $("#customerName").html(rent.customerName);
                $("#customerAddress").html(rent.customerAddress);
                $("#customerPhone").html(rent.customerPhone);
                $("#customerTel").html(rent.customerTel);
                $("#customerIdCard").html(rent.customerIdCard);
                $("#customerContacts").html(rent.customerContacts);

                $("#issueDate").html(rent.issueTime);
                $("#planRentStartTime").html(rent.planRentStartTime);
                $("#planRentEndTime").html(rent.planRentEndTime);
                $("#actualRentStartTime").html(rent.actualRentStartTime);
                $("#planRentSpan").html(rent.planRentSpan);
                $("#note").html(rent.note);

                var sysUnit = [[${@dict.getType('sys_unit')}]];

                var options = {
                    data: deviceArray,
                    sidePagination: "client",
                    showSearch: false,
                    showRefresh: false,
                    showToggle: false,
                    showColumns: false,
                    pagination:false,
                    columns: [{
                        field: 'typeName',
                        title: '器材类型'
                    },
                        {
                            field: 'modeName',
                            title: '器材型号'
                        },
                        {
                            field: 'countNumber',
                            title: '数量'
                        }
                        ,{
                            field: 'unit',
                            title: '单位',
                            formatter:function (value,row,index){
                                return $.table.selectDictLabel(unitDatas, value);
                            }
                        }
                        ,
                        {
                            field: 'rentSpan',
                            title: '租赁天数'
                        },
                        {
                            field: 'note',
                            title: '备注'
                        }]
                };
                $.table.init(options);
            });
        });
    </script>
</body>
</html>